<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../js/modules/main_content.js"></script>
<script type="text/javascript">
$(function() {
	MainContent.init($("#content"));
	var counter = 0;
	
	$("#previous").click(function() {
		MainContent.back();
	});
	
	$("#next").click(function() {
		MainContent.forward();
	});
	
	$("#add").click(function() {
		MainContent.append(randomContent());
		MainContent.show();
		
		counter++;
	});
	
	$("#save_and_clear").click(function() {
		MainContent.save();
		MainContent.clear();
	});
	
	function randomContent() {
		var $temp = $("<td/>",{});
		var hue = 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')';
		
		$temp.css("background-color",hue);
		$temp.css("width","75px");
		$temp.css("height","75px");
		$temp.text(counter);
		
		return $temp;
	};
});
</script>

</head>
<body>
<button id="previous">prev</button>
<button id="next">next</button>
<br/>
<button id="add">add</button>
<button id="save_and_clear">save and clear</button>
<br/>
<br/>
<span id="content"></span>
</body>
</html>